<template>
  <a-modal v-model="visible" :width='600'   title="类别设置"  @cancel='cancel' @ok='sure'>
    <div style='height: 500px;overflow: auto'>
      <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="类别">
          <a-textarea
            v-model="item.content"
            placeholder="请输入合并类别"
            :auto-size="{ minRows: 5, maxRows: 10 }"
          />
        </a-form-model-item>
        <a-form-model-item  label="数量">
          <a-input-number v-model='item.num' :disabled="true"  />
        </a-form-model-item>
      </a-form-model>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        size='small'
        bordered
        :row-selection="rowSelection"
        :rowKey="record => record.categoryId"
        childrenColumnName='childrenColumnName'
        :columns='columns'
        :dataSource='dataSource'
        :pagination="false"
      >
      </a-table>
    </div>

  </a-modal>
</template>

<script>

import ReportsEpidemicWeeklyService from '@/myService/ReportsEpidemicWeeklyService'

export default {
  name: 'CategoryStatisticsMergeModal',
  data(){
    return{
      visible:false,
      item:{
        num:90,
        content:''
      },
      dataSource:[],
      columns: [
        {
          title: '内容',
          ellipsis: true,
          customRender: (text, row, index) => <span>{row.name}({row.content})</span>,
        },
        {
          title: '工单总数',
          align: 'center',
          dataIndex: 'summation',
          ellipsis: true,
        },
        {
          title: '占比',
          align: 'center',
          dataIndex: 'proportion',
          ellipsis: true,
        }
      ],
      selectedRowKeys:[],
      selectedRows:[],
      periodId:''
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys=selectedRowKeys
          this.selectedRows=selectedRows;
          let num=0;
          this.selectedRows.forEach(
            function(item){
              num=num+Number(item.summation);
            })
          this.item.num=num
        },
        selectedRowKeys:this.selectedRowKeys
      };
    },
  },
  methods:{
    async open(ds) {
      this.onClearSelected()
      await this.loadDate(ds)
      this.visible = true;
    },
    cancel(){
      this.visible=false
    },
    sure(){
      if(this.item.content===""||this.item.content===undefined){
        this.$message.info("类别内容不可为空")
        return
      }
      if(this.selectedRowKeys.length<=0){
        this.$message.info("请选择合并项")
        return
      }
      let data={
        content: this.item.content,
        num:this.item.num,
        idList:this.selectedRowKeys,
        periodId:this.periodId
      }
      console.log(this.selectedRowKeys)
      ReportsEpidemicWeeklyService.mergeCategoryStatistics(data).then(res=>{
        if(res.success){
          this.$message.success("合并成功")
          this.$emit("update");
          this.cancel()
        }
      })
    },
    loadDate(periodId){
      this.periodId=periodId;
      this.dataSource=[]
      ReportsEpidemicWeeklyService.getStatisticsCategoryMerge(periodId).then(res=>{
        if (res.success) {
          let temp = res.result.records || res.result
          for(let i=0;i<temp.length;i++){
            if(temp[i].mergeId===null){
              this.dataSource.push(temp[i])
            }
          }
          console.log(this.dataSource)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    onClearSelected(){
      this.selectedRows=[];
      this.selectedRowKeys=[];
      this.item.num=0
    }
  }

}
</script>

<style scoped>

</style>